<template>
  <div>
    <HeaderPage style="box-shadow: 0 1px 10px 0 #dfdfdf; height:64px; padding:0 28px;">
      <template v-slot:left>
        <div class="left" @click="drawer = true">
          <i class="el-icon-menu"></i>
        </div>

        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/main' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item>课程内容</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer v-model="drawer" :direction="'ltr'" size="240px">
          <template #title>
            <div style="width: 96px">
              <img src="https://via.placeholder.com/96x24" alt="logo" height="24px">
            </div>
          </template>
        </el-drawer>

          <!-- <el-menu class="menu">
            <el-menu-item
                style="width: 100%"
                v-for="(item, index) in menus"
                :key="index"
                @click="toNav(item.route)"
            >
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu> -->
      </template>

      <template v-slot:right>
        <RightHeader style="position: absolute; right: 20px; top: 15px;" />
      </template>
    </HeaderPage>
    <div>
      <div class="view-class-detail">
        <div style="margin-top: 20px;">
          <div class="head-layout">
            <img src="	https://assets.ketangpai.com/theme/teacher/big/38.png" alt="39" class="back-img">
            <!-- <img src="../../assets/classDetail/1.png" alt="39" class="back-img"> -->
            <div class="head-top">
              <div class="left">
                <h1 class="text_overflow1">
                  {{ this.course.courseName }}
                </h1>
                <h2 class="text_overflow1">
                  {{ this.course.courseDetail }}
                </h2>
                <div class="code flex-align">
                  <span class="code-but">
                    <img src="../../assets/classDetail/qr.svg" alt="courseCode" width="16px">
                    加课码
                    <span>{{ this.course.courseCode }}</span>
                  </span>
                  <span style="cursor:pointer;" @click="toNav('/member')">已有 {{ course.number }} 人加入</span>
                  <span class="mgl-16" v-if="this.course.courseHour">
                    共 {{ this.course.courseHour }} 学时
                  </span>
                </div>
              </div>
              <div class="right" v-if="this.course.type === 0">
                <div class="group flex-align">
                  <el-button round disabled style="color: #c0c4cc;">
                    <i class="el-icon-video-play"></i>
                    暂无课堂
                  </el-button>
                </div>
              </div>
              <div class="right" v-else>
                <div>
                  <span id="rate-container" class="change" style="margin-right: 8px;" @click="toNav('/classSetting')">
                    <i class="el-icon-setting" style="padding: 6px;"></i>课程设置
                  </span>
                  <span id="rate-container" class="change" style="margin-right: 8px;">
                    <i class="el-icon-edit-outline" style="padding: 6px;"></i>课堂评价
                  </span>
                  <span class="packdownload" style="margin-right: 8px;">
                    <i class="el-icon-document-copy" style="padding: 6px;"></i>打包下载
                  </span>
                  <span class="change" @click="toNav('/member')">
                    <i class="el-icon-user"></i>
                    成员管理
                  </span>
                  <span class="change">
                    <i class="el-icon-shopping-bag-2"></i>
                    更换皮肤
                  </span>
                </div>
                <div class="group flex-align">
                  <span style="cursor: pointer; margin-right: 20px;">
                    <i class="el-icon-view" style="margin-right: 0;"></i>
                    学生视角
                  </span>
                  <span style="cursor: pointer;">
                    <i class="el-icon-share"></i>
                    分享&评审
                  </span>
                  <el-button round>
                    <i class="el-icon-video-play"></i>
                    开始上课
                  </el-button>
                </div>
              </div>
            </div>
          </div>
<!--          <div class="head-bottom flex-align">-->
<!--            <div class="bar flex-align">-->
<!--              <div class="bar-item active">课程教学</div>-->
<!--              <div class="bar-item">学情分析</div>-->
<!--              <div class="bar-item">成绩管理</div>-->
<!--              <div class="bar-item">课程达成度</div>-->
<!--            </div>-->
<!--          </div>-->

          <div class="tabs">
            <button v-for="tab in tabs" :key="tab" @click="selectTab(tab)" :class="{ active: tab === selectedTab }">
              {{ tab }}
            </button>
          </div>


        </div>
        <div class="component-layout">
          <div class="plugins-course-layout">
            <div class="tab-contain">
              <el-tabs v-model="activeNav" v-if="selectedTab === '课程教学'" >
                <el-tab-pane label="目录" name="first">
                  <Course/>
                </el-tab-pane>

                <el-tab-pane label="互动课件" name="second">互动课件</el-tab-pane>

                <el-tab-pane label="作业" name="third">
                  <div>
                    <div class="plugin-work">
                      <div class="head-box flex">
                        <h3><span>共 {{ works.length }} 个活动</span></h3>
                        <div class="flex-align" v-if="this.course.type != 0">
                          <div>
                            <el-button style="margin-right: 20px;display: inline-block">
                              <i class="el-icon-finished"></i>
                              <span>批量操作</span>
                            </el-button>
                          </div>
                          <div>
                            <el-button class="el-button el-button--text el-dropdown-selfdefine"
                              style="margin-right: 15px;">
                              <span>
                                <i class="el-icon-download"></i>
                                下载所有作业
                                <i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                            </el-button>
                          </div>
                          <el-button type="success" size="medium" round
                            style="color: #fff;background-color: #00ca90;border-color: #00ca90;" @click="createWork()"> +
                            添加作业
                          </el-button>
                          <AddWork @init="onMounted" ref="addWorkInfo"></AddWork>
                        </div>
                      </div>

                      <div>
                        <div class="el-checkbox-group" v-if="works.length > 0">
                          <ul class="course-list-box" v-for="work in works" :key="work.id">
                            <li class="item flex">
                              <div class="card-layout-box">
                                <div class="layout-left flex-align">
                                  <img src="" alt="作业" class="img">
                                  <!-- <img src="../../assets/classDetail/work.png" alt="作业" class="img"> -->
                                  <div class="another-name">
                                    <span>{{ work.activity }}</span>
                                  </div>
                                </div>
                                <div class="layout-right flex">
                                  <div class="layout-right-info">
                                    <h6 class="info-title" @click="toHomework(work)">{{ work.title }}</h6>
                                    <div v-if="work.status == 1 && (course.type == 1|| course.type == 2)">未发布</div>
                                    <div class="status-bar" v-else>
                                      <span v-if="course.type == 0" >
                                        <span v-if="0">
                                          <span>已结束</span>
                                          <div class="el-divider el-divider-vertical"></div>
                                        </span>
                                        <span v-else >
                                          <span>提交截止时间：{{ work.endTime }}</span>
                                          <div class="el-divider el-divider-vertical"></div>
                                        </span>
                                      </span>
                                      <span >
                                        {{ work.type === 1 ? '个人作业' : '小组作业' }}
                                      </span>
                                    </div>
                                    <p class="learning-state" v-if="course.type === 0">
                                      <span class="font-color-warning">
                                        {{ (work.status === 1 || work.status === 2) ? '已提交' : '未提交' }}
                                      </span>
                                    </p>
                                  </div>
                                  <div class="layout-right-functional" v-if="work.status === 2 && course.type !== 0"
                                    @click="toHomework(work)">
                                    <div class="learning-situation">
                                      <span class="item-info">
                                        <i class="font-color--main">{{ work.countCheck }}</i>
                                        <i class="pt-text">已批完</i>
                                      </span>
                                      <span class="item-info">
                                        <i class="font-color--main">{{ work.countNoCheck }}</i>
                                        <i class="pt-text">未批完</i>
                                      </span>
                                      <span class="item-info">
                                        <i class="font-color--main">{{ work.countNoSubmit }}</i>
                                        <i class="pt-text">未交</i>
                                      </span>
                                    </div>
                                  </div>
                                  <div class="layout-right-functional" v-if="work.status == 1 && course.type != 0">
                                    <div class="learning-situation" @click="releaseWork(work)">
                                      <span class="item-info">
                                        <i class="el-icon-position font-color--main"></i>
                                        <i class="pt-text">发布</i>
                                      </span>
                                    </div>
                                  </div>
                                  <div v-if="course.type != 0">
                                    <el-dropdown trigger="click" style="margin: 0 16px; cursor: pointer;">
    <span class="el-dropdown-link" style="display: flex; flex-direction: column">
      <i class="el-icon-more-outline" style="margin-bottom: 5px"></i>
      更多
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item style="display: block">
          <div @click="isUpdateWorkVisible(work.id)">编辑</div>
        </el-dropdown-item>
        <el-dropdown-item style="display: block">移动到章节</el-dropdown-item>
        <el-dropdown-item style="display: block">保存到备课区</el-dropdown-item>
        <el-dropdown-item style="display: block">
          <div @click="deleteWorkByWorkId(work.id)">删除</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

                                  </div>

                                  <el-dialog title="编辑作业" v-model="updateWorkVisible" style="min-width: 400px;">
                                    <el-form :model="updateWorkForm" ref="updateWorkForm" :rules="baseRules"
                                      style="text-align: left">

                                      <el-form-item>
                                        <el-upload action="" :http-request="onUpdateUpload">
                                          <el-button size="small" type="primary">导入作业</el-button>
                                        </el-upload>
                                      </el-form-item>

                                      <el-form-item label="作业类型" label-width="80px" prop="type">
                                        <el-radio v-model="updateWorkForm.type" :label="1">个人作业</el-radio>
                                        <el-radio v-model="updateWorkForm.type" :label="2">小组作业</el-radio>
                                      </el-form-item>
                                      <el-form-item label="作业标题" label-width="80px" prop="title">
                                        <el-input v-model="updateWorkForm.title" autocomplete="off" maxlength="70"
                                          show-word-limit placeholder="作业标题"></el-input>
                                      </el-form-item>
                                      <el-form-item>
                                        <el-input v-model="updateWorkForm.content" type="textarea"
                                          placeholder="请输入作业描述"></el-input>
                                      </el-form-item>
                                      <el-form-item label="活动类型标签" label-width="100px">
                                        <el-input v-model="updateWorkForm.activity" autocomplete="off" maxlength="10"
                                          show-word-limit></el-input>
                                      </el-form-item>
                                      <el-form-item label="应用环节" label-width="100px">
                                        <el-select v-model="updateWorkForm.process" placeholder="请选择">
                                          <el-option v-for="item in process" :key="item.value" :label="item.label"
                                            :value="item.value" style="display: block">
                                          </el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="所属章节" label-width="100px">
                                        <el-select v-model="updateWorkForm.chapter" placeholder="请选择">
                                          <el-option v-for="item in chapter" :key="item.value" :label="item.label"
                                            :value="item.value" style="display: block">
                                          </el-option>
                                        </el-select>
                                      </el-form-item>

                                      <el-form-item>
                                        <el-switch v-model="updateWorkMoreVisible" active-text="是否立即发布"/>
                                      </el-form-item>
                                      <el-form-item v-if="updateWorkMoreVisible">
                                        <el-form ref="updateWorkMoreForm" :model="updateWorkForm" :rules="moreRules"
                                          label-width="80px">
                                          <el-form-item label="发布时间" label-width="80px" prop="releaseTime"
                                            style="margin-bottom: 24px">
                                            <el-date-picker type="datetime" placeholder="选择日期时间"
                                              v-model="updateWorkForm.releaseTime">
                                            </el-date-picker>
                                          </el-form-item>

                                          <el-form-item label="截止时间" label-width="80px" prop="endTime"
                                            style="margin-bottom: 24px">
                                            <el-date-picker type="datetime" placeholder="选择日期时间"
                                              v-model="updateWorkForm.endTime">
                                            </el-date-picker>
                                          </el-form-item>
                                          <el-form-item label="总分" prop="score">
                                            <el-input v-model="updateWorkForm.score" autocomplete="off"
                                              style="width: 220px;margin-right:20px"></el-input>
                                            <el-switch v-model="TimeoutVisible" active-text="若超时，禁止提交">
                                            </el-switch>
                                          </el-form-item>
                                        </el-form>
                                      </el-form-item>
                                    </el-form>
                                    <template v-slot:footer>
                                      <div class="dialog-footer">
                                        <el-button @click="resetUpdateWork('updateWorkForm')">取 消</el-button>
                                        <el-button type="primary" @click="submitUpdateWork('updateWorkForm')">确 定</el-button>
                                      </div>
                                    </template>
                                  </el-dialog>

                                  <div class="layout-right-functional" style="margin-right: 20px" v-if="course.type === 0">
                                    <el-button type="primary" size="small" v-if="(work.status === 1 || work.status === 2)">
                                      已提交
                                    </el-button>
                                    <el-button type="primary" size="small" v-else @click="toHomework(work)">
                                      提交作业
                                    </el-button>
                                  </div>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="component-no_data" v-else>
                          <div class="img-box">
                            <el-image class="img" src="https://www.ketangpai.com/img/img_empty.84d0931c.png"></el-image>
                            暂无数据
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>


                <el-tab-pane label="测试" name="fourth">测试</el-tab-pane>
                <el-tab-pane label="资料" name="fifth">资料</el-tab-pane>

                <el-tab-pane label="腾讯会议" name="sixth">
                  <h4 style="text-align: left"><span>共 {{ works.length }} 个活动</span></h4>
                  <div class="img-box" style="text-align: center">
                    <el-image class="img" src="https://www.ketangpai.com/img/img_empty.84d0931c.png"></el-image>
                    <div>暂无数据</div>
                  </div>
                </el-tab-pane>

                <el-tab-pane label="公告" name="seventh">公告</el-tab-pane>
                <el-tab-pane label="话题" name="eighth">话题</el-tab-pane>
                <el-tab-pane label="互动答题" name="ninth">
                  <h4 style="text-align: left"><span>共 {{ works.length }} 个活动</span></h4>
                  <div class="img-box" style="text-align: center">
                    <el-image class="img" src="https://www.ketangpai.com/img/img_empty.84d0931c.png"></el-image>
                    <div>暂无数据</div>
                  </div>
                </el-tab-pane>
              </el-tabs>

              <el-tabs v-if="selectedTab === '学情分析'">
                <Analysis/>
              </el-tabs>

              <el-tabs v-if="selectedTab === '成绩管理'">
                <!-- <AcademicShow/> -->
              </el-tabs>

              <el-tabs v-if="selectedTab === '课程介绍'">
                <CourseIntroduction/>
              </el-tabs>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderPage from "../../components/header/AppHeader.vue";
import RightHeader from "../../components/header/RightHeader.vue";
import { deleteEmptyOption } from "@/utils/deleteEmptyOption";
import AddWork from "@/components/work/AddWork.vue";
import Course from "@/views/class/classShow/classShow.vue";
import Analysis from "@/components/analysis/AnalysisPage.vue";
import CourseIntroduction from "@/views/class/classIntroduction/classIntroduction.vue"
// import AcademicShow from "@/views/class/academic/Academic_show.vue"
import {deleteRequest, getRequest} from "@/utils/api";
import Storage from "@/utils/storage";
import { get, post, put } from "@/utils/request";
import { formatDateTime } from "@/utils/date";
import { ref } from "vue";


export default {
  name: "classPage",
  components: {
    RightHeader,
    HeaderPage,
    AddWork,
    Course,
    Analysis,
    CourseIntroduction,
    // AcademicShow
  },
  data() {
    return {
      drawer: false,
      tabs: ["课程教学", "学情分析", "成绩管理", "课程介绍"],
      selectedTab: "课程教学",
      menus: [
        {
          name: '我的课堂',
          route: '/main'
        },
      ],
      course: Storage.getSession("currentCourseMember"),
      updateWorkId: 0,
      activeNav: 'third',
      works: [],
      currentTime: '',
      dialogFormVisible: false,
      updateWorkVisible: false,
      updateWorkMoreVisible: false,
      TimeoutVisible: false,
      updateWorkForm: {
      },
      process: [
        {
          label: '课前',
          value: 0
        },
        {
          label: '课中',
          value: 1
        },
        {
          label: '课后',
          value: 2
        },
        {
          label: '期中',
          value: 3
        },
        {
          label: '期末',
          value: 4
        },
      ],
      chapter: [],
      baseRules: {
        type: [
          { required: true, message: '请选择作业类型', trigger: 'blur' },
        ],
        title: [
          { required: true, message: '请输入作业标题', trigger: 'blur' },
        ],
      },
      moreRules: {
        releaseTime: [
          { required: true, message: '请选择发布时间', trigger: 'blur' },
        ],
        endTime: [
          { required: true, message: '请选择截止时间', trigger: 'blur' },
        ],
        score: [
          { required: true, message: '请输入作业总分', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
      if (tab === "课程学习") {
        this.selectedSubTab = "目录"; // 默认选中子标题
      }
    },
    // 初始化页面
    onMounted() {
      this.course.value = Storage.getSession("currentCourseMember")
      this.getCourseById();
      console.log(this.course)
      this.getTypeByUserId();
    },
    // 跳转页面
    toNav(nav) {
      this.$router.push(nav)
    },
    // 通过课程id查询此课程信息
    async getCourseById() {
      const id = Storage.getSession("currentCourseMember").id;//this.$store.status.courseId;  // 获取课程ID

      console.log("courseId", id);
      if (id) {
        // 如果课程 ID 有效，进行请求
        try {
          const res = await post(`/course/getById?courseId=${id}`);
          console.log("res.data", res);
          if (res) {
            this.course = res.data;
            this.getTypeByUserId();  // 获取用户类型等后续操作
          }
        } catch (error) {
          console.error("请求失败：", error); // 错误处理
        }
      } else {
        console.error("课程 ID 无效！");
      }
    },

    // 通过课程id查询教师创建的作业
    getWorkByCourseId() {
      const courseId = Storage.getSession("currentCourseMember").id;
      const res = getRequest(`/api/work/queryByCid/${courseId}`).then(res => {
        console.log("获取作业的响应：", res);
        console.log("res.data:", res.data.data);
        if (res && res.data) {
          this.works = res.data.data;
        } else {
          console.error("未获取到作业数据");
        }
      }).catch(error => {
        console.error("请求失败：", error);
      });
      console.log(res);
    },

    async getTypeByUserId() {
      const userId = Storage.getSession("user");//this.$store.getters.userId;
      const courseId = Storage.getSession("currentCourseMember").id;//this.$store.getters.courseId;
      // const data = { userId, courseId };
      await post('/userCourse/list', { userId: userId.id, courseId: courseId }).then(res => {
        // 检查 res 和 res.data 是否存在
        console.log(res)
        if (res) {
          this.course.type = res.data.type; // 确保 list[0] 存在，type是userCourse表里面的 0是学生端，1是教师端
          Storage.setSession("userType", res.data.type)
          console.log(this.course.type)
          console.log("res.list[0].type:", this.course.type);
          if (this.course.type !== 0) {
            this.getWorkByCourseId();
          } else {
            this.getStuWorkByCourseId();
          }
        } else {
          console.error("res.data.list 为空或无效：", res);
          console.log("res:", res);
          console.log("res.data.data.list:", res.data.data.list);
          // 处理数据为空的情况
        }

      }).catch(error => {
        console.error("请求失败：", error); // 错误处理
      });
    },


    // 通过课程id查询学生作业
    getStuWorkByCourseId() {
      const cid = Storage.getSession("currentCourseMember").id;//this.$store.getters.courseId;
      const uid = Storage.getSession("user").id;//this.$store.getters.user.id;
      get(`api/work/stuwork/selectByUCid/${cid}/${uid}`).then(res => {
        console.log("获取学生作业的响应：", res);
        if (res) {
          this.works = res.data;
          console.log(this.works)
          // 格式化 endTime 属性
          this.works.forEach(item => {
            console.log(item.endTime)
            if (item.endTime != null) {
              const date = new Date(item.endTime);
              const year = date.getFullYear();
              const month = String(date.getMonth() + 1).padStart(2, '0');
              const day = String(date.getDate()).padStart(2, '0');
              const hours = String(date.getHours()).padStart(2, '0');
              const minutes = String(date.getMinutes()).padStart(2, '0');
              const seconds = String(date.getSeconds()).padStart(2, '0');
              item.endTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
          });
        } else {
          console.error("未获取到学生作业数据", res);
        }
      }).catch(error => {
        console.error("请求失败：", error);
      });
    },
    // 获取当前时间
    getCurrentTime() {
      return this.timeFormate(new Date());
    },
    // 返回当前时间（年-月-日）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
      let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();

      return year + "-" + month + "-" + date;
    },
    // 判断是否超时
    isOver(endTime) {
      if (Number(endTime.substring(0, 4)) - Number(this.currentTime.substring(0, 4)) < 0) {
        return true
      } else if (Number(endTime.substring(5, 7)) - Number(this.currentTime.substring(5, 7)) < 0) {
        return true
      } else return Number(endTime.substring(8, 10)) - Number(this.currentTime.substring(8, 10)) < 0;
    },
    // 添加作业按钮点击
    createWork() {
      if (this.$refs.addWorkInfo && typeof this.$refs.addWorkInfo.show === 'function') {
        this.$refs.addWorkInfo.show();
      } else {
        console.error('addWorkInfo 组件未正确挂载或 show 方法不存在');
      }
    },
    // 编辑时上传文件
    onUpdateUpload(file) {
      this.updateWorkForm.workFile = file.file;
    },
    // 通过作业id获取作业详情
    getWorkByWorkId(id) {
      const res = get(`api/work/${id}`).then(res => {
        console.log(res);
        if (res && res.data) {
          this.updateWorkForm = deleteEmptyOption(res.data);
        } else {
          console.error("作业详情数据无效");
        }
      })
      console.log(res);
    },
    // 编辑作业弹窗可见性
    isUpdateWorkVisible(id) {
      this.getWorkByWorkId(id);
      this.updateWorkId = id;
      this.updateWorkVisible = true;
      if (this.updateWorkForm.status == 2) this.updateWorkMoreVisible = true
    },
    // 发布作业按钮点击
    releaseWork(work) {
      this.updateWorkForm = work;
      this.isUpdateWorkVisible(work.id);
    },
    // 确认编辑作业
    submitUpdateWork() {
      if (this.updateWorkMoreVisible) {
        this.updateWorkForm.status = 2;
        this.updateWorkForm.releaseTime = this.$moment(this.updateWorkForm.releaseTime).format("YYYY-MM-DD HH:mm:ss");
        this.updateWorkForm.endTime = this.$moment(this.updateWorkForm.endTime).format("YYYY-MM-DD HH:mm:ss");
        if (this.TimeoutVisible) {
          this.updateWorkForm.isAllowOvertimeSubmission = 2;
        } else {
          this.updateWorkForm.isAllowOvertimeSubmission = 1;
        }
      } else {
        this.updateWorkForm.status = 1;
        // 使用 delete 操作符删除属性
        delete this.updateWorkForm.releaseTime;
        delete this.updateWorkForm.endTime;
        delete this.updateWorkForm.createTime;
        delete this.updateWorkForm.isAllowOvertimeSubmission;
      }
      // 使用 delete 操作符删除属性
      delete this.updateWorkForm.createTime;
      this.updateWork();
    },
    // 取消编辑作业
    resetUpdateWork() {
      this.getWorkByWorkId(this.updateWorkId);
      this.updateWorkVisible = false
      this.updateWorkMoreVisible = false
    },
    prepareFormData() {
      const formData = { ...this.updateWorkForm }

      if (this.updateWorkMoreVisible) {
        formData.status = 2
        formData.releaseTime = formatDateTime(formData.releaseTime)
        formData.endTime = formatDateTime(formData.endTime)
        formData.isAllowOvertimeSubmission = this.TimeoutVisible ? 2 : 1
      } else {
        formData.status = 1
        delete formData.releaseTime
        delete formData.endTime
        formData.score = 0
      }

      formData.courseId = Storage.getSession("currentCourseMember").id
      return formData
    },
    // 编辑作业提交
    updateWork() {
      console.log(this.updateWorkForm.id);
      console.log(this.updateWorkForm)
      const formData = this.prepareFormData();
      put(`api/work/update/${this.updateWorkForm.id}`, formData).then(res => {
        if (res) {
          this.resetUpdateWork(this.updateWorkId);
          this.onMounted();
        }
      })
    },
    // 删除作业
    // 删除作业
    deleteWorkByWorkId(id) {
      this.$confirm('此操作将永久删除该作业, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRequest(`/api/work/${id}`).then(res => {
          if (res) {
            this.onMounted();
            this.$message.success('删除成功');
          }
        }).catch(error => {
          console.error('删除失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        this.$message.info('取消删除');
      });
    },
    // 跳转作业详情页面
    toHomework(work) {
      console.log(this.course.type)
      const id = ref();
      if (this.course.type == 0) {
        id.value = work.workId;
      } else id.value = work.id;

      console.log(work)
      console.log(id);
      if (this.course) {
        // 通过学生作业id查询作业id
        const res = getRequest(`/api/work/${id.value}`).then(res => {
          console.log("stuWorkID", res.data.data)
          if (res) {
            id.value = res.data.data.id;
            console.log(id.value)
            Storage.setSession("workId", id.value)
            this.$router.push({ name: 'Homework', params: { id: id.value } });

            // this.$router.push('/homePage:{workId}')
            this.$store.dispatch('saveWorkIdInfo', { workId: id.value })
          } else {
            console.error("无法获取作业 ID");
          }
        })
        console.log(res);
      } else {
        this.$router.push('/homework')
        this.$store.dispatch('saveWorkIdInfo', { workId: id.value })
      }
    }
  },
  created() {
    this.onMounted();
  }
};
</script>

<style scoped lang="less">
.left {
  margin-right: 15px;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.menu {
  font-weight: 600;
}

.view-class-detail {
  width: 1224px;
  margin: auto;

  .head-layout {
    position: relative;
    background: rgb(232, 240, 255);
    border-radius: 8px 8px 0 0;
    height: 200px;

    .back-img {
      border-radius: 8px 8px 0 0;
      width: 1224px;
      height: 200px;
    }

    .head-top {
      position: absolute;
      width: 1176px;
      height: 152px;
      left: 0;
      top: 0;
      padding: 24px;
      color: rgb(255, 255, 255);
      display: flex;

      .left {
        flex: 1 1 0;

        h1 {
          font-size: 36px;
          margin: 0;
        }

        .text_overflow1 {
          display: -webkit-box;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: normal;
          -webkit-box-orient: vertical;
        }

        h2 {
          font-size: 20px;
          line-height: 32px;
          font-weight: 400;
          margin: 0;
        }

        .code {
          margin-top: 55px;
          font-size: 14px;
          font-weight: 400;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        font-size: 14px;

        .change {
          cursor: pointer;
          align-self: flex-end;
        }

        .packdownload {
          cursor: pointer;
          margin-right: 10px;
        }

        .change {
          cursor: pointer;
          align-self: flex-end;
        }

        .group {
          position: absolute;
          right: 24px;
          bottom: 24px;

          .el-button {
            color: #ff6000;
            margin-left: 24px;
            min-width: 120px;
          }
        }
      }
    }
  }
}
.tabs {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 0 20px;
}

.tabs button {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
}

.tabs button.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}
.flex-align {
  display: flex;
  align-items: center;
}

.code-but {
  cursor: pointer;
  margin-right: 16px;
}

.mgl-16 {
  margin-left: 16px;
}


.view-class-detail .head-bottom {
  width: 1224px;
  height: 64px;
  color: #3c4043;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  background: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);

  .bar {
    .active {
      background: #e8f0ff;
      color: #4285f4;
      border-radius: 20px;
    }

    .bar-item {
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      margin: 0 24px;
      text-align: center;
      font-size: 17px;
      padding-left: 5px;
      padding-right: 5px;
    }
  }

}

.view-class-detail .component-layout {
  margin: 10px 0 0 0;
}

.plugins-course-layout {
  min-height: 500px;
}

.tab-contain {
  position: relative;
}

.plugin-work .head-box {
  align-items: center;
  margin: 0;

  h3 {
    font-size: 14px;
  }
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-checkbox-group {
  font-size: 0;
}

.course-list-box {
  padding-top: 16px;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
  text-align: left;
}

.card-layout-box {
  width: 100%;
  background: #fff;
  display: flex;
  position: relative;

  .layout-left {
    flex-direction: column;
    min-width: 85px;
    margin: 0 16px 10px 0;
    font-size: 12px;

    .img {
      height: 58px;
      width: 58px;
    }

    .another-name {
      padding-top: 13px;
    }
  }

  .layout-right {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 0 0 8px;
    font-size: 14px;

    .layout-right-info {
      .status-bar {
        color: #5f6368;
        font-size: 12px;
      }

      .info-title {
        font-size: 16px;
        margin-bottom: 12px;
        margin-top: 0;
        max-width: 500px;
        cursor: pointer;
        color: #212121;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
      }

      .learning-state {
        font-size: 12px;
        padding-top: 8px;
      }
    }

    .layout-right-functional {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      font-size: 12px;

      .learning-situation {
        display: flex;
        justify-content: center;
        border-right: 1px solid #e7ebf0;

        .item-info {
          text-align: center;
          cursor: pointer;
          overflow: hidden;
          min-width: 72px;

          i {
            display: block;
            font-size: 20px;
            font-style: normal;
          }

          .pt-text {
            font-size: 12px;
            color: #202124;
          }
        }
      }
    }
  }
}

.component-no_data {
  height: max-content;
  padding-top: 100px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #74787c;
  line-height: 24px;

  .img-box {
    padding-bottom: 12px;

    .img {
      height: 250px;
      display: block;
      margin: 0 auto;
    }
  }
}

.el-divider-vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}


.font-color-warning {
  color: #ff941f;
}


.font-color--main {
  color: #4285f4;
}

/deep/ .el-tabs__nav-wrap::after {
  background: none;
}

/deep/ .el-dialog {
  width: 650px;
}

/deep/ .el-dialog__body {
  padding: 0 20px;
}
</style>
